#{extends 'magicBox.html' /}
#{set title:'Showing profile: '+user.name /}

		#{if connected.isAdmin}
		<p>
			<a href="/admin/users/${user.id}"><img src="@{'/public/images/famfam/pencil.png'}"/> Edit profile</a>
			</p>			
		#{/if}
		#{if user==me & !(connected.isAdmin)}
			<p>
				<a href="/accounts/profile?id=${user.id}"><img src="@{'/public/images/famfam/pencil.png'}"/> Edit profile</a>
			</p>#{/if}
			#{if user == me}
			<p>
				<a href="/requestDeletion"><img src="@{'/public/images/famfam/delete.png'}"/> Request Deletion From System</a>
			</p>
		#{/if}
		
		#{if connected.isAdmin & user != me }
<p>
			<a href="@{Users.del(user.id)}" onclick="return confirm('Are you sure you want to delete ${user.name} completely from the system?');"><img src="@{'/public/images/famfam/delete.png'}"/> Delete this user</a>
</p>
		#{/if}

#{if flash.success}
<p class="success">&{flash.success}</p>
#{/if}
<h1>${user.name}</h1>
	<div>
		<h2>Projects:</h2>
		#{if user.projects}
			#{note 'highlight'}Click a project to toggle the components ${user.name} is assigned to#{/note}<br/>						
		#{/if}
		#{list items:user.projects, as:'project'}
			<div><a href="javascript:;" onclick="$('#project_components_${project.id}').toggle()"><font size = 2>${project.name}</font></a></div>
			<ol id="project_components_${project.id}" style="display:none;">
			#{set has:false /}
			#{list items:project.components, as:'component'}
				#{if user.components.contains(component)}
					#{set has:true /}
					<li>${component.name}</li>
				#{/if}
			#{/list}
			#{ifnot has} #{note 'error'}${user.name} is not assigned to a component in ${project.name} yet !#{/note}#{/ifnot}
			</ol>
		#{/list}
		#{else}			
			#{note 'error'}${user.name} is not involved in any projects yet !#{/note}</div>
		#{/else}
	
</div>
<script type="text/javascript">
$(document).ready(function() {
	$("#accordion").accordion({ autoHeight:false } );
})
searching = null;
function search_projects() {
	if (!$('#project_search').val()) return;
	$('#loading').show();
	if (searching) {
		searching.abort();
	}
	searching = $.post( '/ajax/projects?invite=true&query=' + $('#project_search').val(),
			function(data) {
				str = '';
				$.each(data, function(id, item) {
					str += '<div style="height:150%;clear:both;">' + 
								'<div style="float:left;width:50px;">'+item.name+'</div>' + 
								'<div style="float:left;">' + 
								'<span id="project_'+item.id+'_roles"><a href="#" id="invite_lnk_'+item.id+'" onclick="load_roles('+item.id+');">Invite</a></span>' + 
								'</div>' + 
							'</div>';
				} );
				str += '<br style="clear:both;" />';
				$('#search_results').html(str).slideDown();
				$('#loading').hide();
			});
}
function load_roles( project_id ) {
	$.post('/projecttasks/getroles?id='+project_id, function(data){
		str = '<select id="role_'+project_id+'">';
		$.each(data, function(id, item){
			str += '<option value='+item.id+'>'+item.name+'</option>';
		});
		str += '</select> <a href="#" onclick="send_invite('+project_id+');">Send Invite!</a>';
		$('#project_'+project_id+'_roles').html( str );
	});	
}

function send_invite( project_id ) {
	$.post('/invites/sendinvite?id=' + $('#role_'+project_id).val() + '&userId=${user.id}', function(data){
		$('#project_'+project_id+'_roles').html(' &minus; Invitation sent!');
		$('#invite_lnk_'+project_id).show();
	});
}
</script>